<template>
  <div class="fvaisdf">
    <div style="z-index: 200" class="bfiasdf">
      <el-input v-model="input" placeholder="请输入您的名字"></el-input>
      <el-button type="primary" @click="generateQRCode">确定</el-button>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";

export default {
  name: "",
  components: {}, //组件
  data() {
    return {
      input: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    generateQRCode() {
      // 二维码内容
      const content = `http://192.168.3.126:8081/#/page/page5?name=${this.input}`;
      // 生成二维码
      QRCode.toDataURL(content)
        .then((url) => {
          // 创建一个新窗口
          const newWindow = window.open(content, "_blank");
          // 如果新窗口打开成功
          if (newWindow) {
            // 设置新窗口的HTML
            newWindow.document.write(`<img src="${url}" alt="二维码"/>`);
            // 可以添加额外的样式或脚本
            newWindow.document.close(); // 关闭文档
          }
        })
        .catch((error) => {
          console.error("生成二维码失败:", error);
        });
    },
  },
  computed: {},
};
</script>
<style scoped lang='less'>
.fvaisdf {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.bfiasdf {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
